<template >
  <div id="home" style="background: #f2f2f2; padding-bottom: 150px">
    <!-- 顶部 -->
    <div class="header">
      <span><img src="" alt="" /></span>
      <span>水果类商城</span>
    </div>
    <!-- 轮播图 -->
    <div style="margin-top: 42px" class="lunbo">
      <div
        id="carouselExampleFade"
        class="carousel slide carousel-fade"
        data-ride="carousel"
      >
        <div class="carousel-inner">
          <div
            class="carousel-item"
            v-for="(item, index) in lunbo"
            :key="index"
            :class="`item ${index === 0 ? 'active' : ''}`"
          >
            <img :src="item.src" class="d-block w-100" alt="..." />
          </div>
          <!-- <div class="carousel-item">
            <img
              src="../../public/img/banner_2.jpg"
              class="d-block w-100"
              alt="..."
            />
          </div> -->
        </div>
        <a
          class="carousel-control-prev"
          href="#carouselExampleFade"
          role="button"
          data-slide="prev"
        >
          <span class="carousel-control-prev-icon" aria-hidden="true"></span>
          <span class="sr-only">Previous</span>
        </a>
        <a
          class="carousel-control-next"
          href="#carouselExampleFade"
          role="button"
          data-slide="next"
        >
          <span class="carousel-control-next-icon" aria-hidden="true"></span>
          <span class="sr-only">Next</span>
        </a>
      </div>
    </div>
    <!-- 4个大图标 -->
    <div class="list-nav">
      <div class="list-items">
        <img src="../../public/img/01.png" alt="" />
        <span>精选商品</span>
      </div>
      <div class="list-items">
        <img src="../../public/img/02.png" alt="" />
        <span>新鲜直达</span>
      </div>
      <div class="list-items">
        <img src="../../public/img/03.png" alt="" />
        <span>礼品套装</span>
      </div>
      <div class="list-items">
        <img src="../../public/img/04.png" alt="" />
        <span>优惠券</span>
      </div>
    </div>
    <!-- 限时疯抢 -->
    <div class="qiang">
      <p>限时疯抢</p>
      <div>
        <div class="qiang-list">
          <img src="../../public/img/1.jpg" alt="" />
          <span>葡萄柚</span>
          <span>￥40元</span>
        </div>
        <div class="qiang-list">
          <img src="../../public/img/2.jpg" alt="" />
          <span>秘鲁红提</span>
          <span>￥40元</span>
        </div>
        <div class="qiang-list">
          <img src="../../public/img/3.jpg" alt="" />
          <span>绿奇异果</span>
          <span>￥40元</span>
        </div>
      </div>
    </div>
    <!-- 本周推荐 -->
    <div class="benzhou">
      <p>本周推荐</p>
      <div class="xx">
        <img src="../../public/img/05.jpg" alt="" />
        <div>
          <p>美国新奇士脐橙</p>
          <p>VC爆棚 沁甜多汁</p>
          <p>￥36元</p>
          <p>点击抢购</p>
        </div>
      </div>
      <div class="xx">
        <div>
          <p>泰国椰青</p>
          <p>一口清甜汁</p>
          <p>￥77元</p>
          <p>点击抢购</p>
        </div>
        <img src="../../public/img/06.jpg" alt="" />
      </div>
    </div>
    <!-- 精选商品 -->
    <div class="jingxuan">
      <div class="jing"><p>精选商品</p></div>
      <router-link
        :to="path"
        v-for="(item, index) in nav"
        :key="index"
        class="jin"
        @click.native="cli(index)"
      >
        <div>
          <img :src="item.src" />
          <p title="item.proName">{{ item.title }}</p>
          <p>
            <span>¥{{ item.priceOne }}</span
            ><span>¥{{ item.proPrice }}</span>
          </p>
          <p>
            销量：<span>{{ item.num }}</span
            ><span class="iconfont icon-gouwuchetianjia"></span>
          </p>
        </div>
      </router-link>
    </div>
    <!-- 底部 -->
    <div class="weini">
      <p>为您鉴证每一口安心</p>
      <p>
        <span> ☆ 优鲜严选 ></span><span> ☆ 安心检测 ></span
        ><span> ☆ 赔付保障 ></span>
      </p>
    </div>
  </div>
</template>

<style lang="less" scoped>
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
// 顶部
.header {
  background-color: #101013;
  color: #ffffff;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  text-align: center;
  cursor: pointer;
  span {
    font-size: 16px;
    line-height: 43px;
    margin-left: -26px;
    img {
      width: 25px;
      float: left;
      background-color: #101013;
      margin: 7px 0 0 10px;
    }
  }
}
// 轮播

// 4个大图标
.list-nav {
  background-color: #ffffff;
  margin-bottom: 0.266667rem;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  color: #6b2828;
  font-size: 14px;
  padding: 0.133333rem 0;
}
.list-items {
  width: 25%;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}
.list-items img {
  width: 2.133333rem;
}
// 限时疯抢
.qiang {
  background-color: #ffffff;
  color: #ff7e00;
  padding: 0.266667rem 0.4rem;
  margin-bottom: 0.266667rem;
  p {
    display: inline-block;
    border-left: 0.133333rem solid #ff7e00;
    padding-left: 0.4rem;
    font-size: 18px;
  }
  .qiang-list {
    color: #6b2828;
    font-size: 15px;
    width: 33%;
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    :nth-child(3) {
      color: #ff7e00;
    }
    img {
      width: 100%;
    }
  }
}
// 本周推荐
.benzhou {
  background-color: #ffffff;
  color: #ff7e00;
  padding: 0.266667rem 0.4rem;
  margin-bottom: 0.266667rem;
}
.benzhou > p,
.jingxuan .jing > p,
.weini p:nth-child(1) {
  display: inline-block;
  color: #ff7e00;
  border-left: 0.133333rem solid #ff7e00;
  padding-left: 0.4rem;
  font-size: 18px;
}
.benzhou .xx {
  display: flex;
  flex-wrap: ceil;
}
.benzhou img:nth-child(1) {
  width: 50%;
  height: 50%;
  display: inline-block;
  border-right: 1px solid orange;
  border-bottom: 1px solid orange;
}
.benzhou img:nth-child(2) {
  margin-left: -0.026667rem;
  margin-top: -0.026667rem;
  width: 50%;
  height: 50%;
  display: inline-block;
  border-left: 1px solid orange;
  border-top: 1px solid orange;
}
.xx div {
  width: 50%;
  padding-top: 0.533333rem;
}
.benzhou div p {
  text-align: center;
}
.benzhou div p:nth-child(1) {
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  font-family: 默认;
  color: #101013;
}
.benzhou div p:nth-child(2) {
  font-size: 16px;
  font-weight: normal;
  font-style: normal;
  font-family: 默认;
  color: #919191;
}
.benzhou div p:nth-child(3) {
  font-size: 18px;
  font-weight: normal;
  font-style: normal;
  font-family: 默认;
  color: #ff7e00;
}
.benzhou div p:nth-child(4) {
  margin-left: 1.28rem;
  font-size: 16px;
  border-radius: 0.4rem;
  width: 2.133333rem;
  height: 0.8rem;
  line-height: 0.8rem;
  color: #ffffff;
  background-color: #ff7e00;
}
// 精选商品
.jingxuan {
  background-color: #ffffff;
  padding: 0.266667rem 0.4rem;
  margin-bottom: 0.266667rem;
  .jin {
    width: 50%;
    height: 50%;
    display: inline-block;
    font-size: 16px;
    img {
      width: 4rem;
    }
  }
}
.jin p:nth-child(2) {
  text-decoration: inherit;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  width: calc(100% - 12px);
  color: #a75656;
}
.jin p:nth-child(3) {
  font-size: 16px;
  font-weight: bold;
  color: #fd6d36;
  span:nth-child(1) {
    margin-right: 10px;
    text-decoration-line: line-through;
    text-decoration-color: red;
  }
  span:nth-child(2) {
    color: #ff840b;
  }
}
.jin p:nth-child(4) {
  color: #8d8989;
  margin-top: -8px;
  span:last-child {
    font-size: 22px;
    margin-left: 1.33333rem;
    text-align: right;
  }
}
// 底部
.weini {
  background-color: #ffffff;
  padding: 0.266667rem 0.4rem 1.066667rem;
  p:nth-child(2) {
    margin-top: 0.533333rem;
    font-size: 14px;
    font-family: 默认;
    color: #919191;
    display: flex;
    justify-content: space-between;
  }
}
</style>

<script>
import bus from "@/bus.js";
export default {
  data() {
    return {
      lunbo: [],
      nav: [],
      path: "/Xiangqing",
    };
  },
  mounted() {
    // 通过后台从数据库调取数据
    this.$axios.get("http://47.114.130.21:3003/Home").then((data) => {
     this.lunbo = JSON.parse(data.data[0].lunbo);   
     this.nav = JSON.parse(data.data[0].nav); 
    //  console.log(this.lunbo);
    });
    
    
  },
  methods: {
    cli: function (index) {
      var navShop = this.nav[index];
      setTimeout(() => {
        bus.$emit("myHander", this.nav[index]);
      }, 200);
    },
  },
};
</script>
